<!--
@Description:功能描述
@Author:zqy
@Date:2022-10-21 16:34:48
@Last Modified by:zqy
@Last Modified time:2022-10-21 16:34:48
-->
<template>
  <Scroll v-bind="$attrs" :class="className" :style="{backgroundColor}">
    <slot />
  </Scroll>
</template>
<script>
import Scroll from '@/components/Scroll'
export default {
  name: 'NavBar',
  components: {
    Scroll
  },
  inheritAttrs: false,
  props: {
    media: {
      type: Boolean,
      default: false
    },
    borderBottom: {
      type: Boolean,
      default: true
    },
    space: {
      type: Boolean,
      default: true
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {
    }
  },
  computed: {
    className() {
      const classList = ['nav-bar']
      if (this.media)classList.push('media-query')
      if (this.borderBottom)classList.push('border-bottom')
      if (this.space)classList.push('space12')
      return classList
    }
  },
  methods: {
  }
}
</script>
<style lang="less">
.nav-bar{
  display: flex;
  padding: 15px 12px;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  &>*{
    flex: 0 0 auto;
  }
  // @media screen and (min-width: 750px) {
  //   &::after{
  //     content: "";
  //     display: block;
  //     width: 12px;
  //   }
  // }
}
.space12{
  &::after{
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    flex: 0 0 12px;
  }
}
.media-query {
  @media  screen and (max-width: 500px) {
    justify-content: space-between;
  }
  @media screen and (min-width: 750px) {
    justify-content: flex-start;
  }
}
.border-bottom{
  border-bottom: 1px solid #F5F6F7;
}
</style>
